﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BoxProContent.ascx.cs" Inherits="FreshCms.BackEnd.Controls.Module.Box.BoxProContent" %>

<script src="/BackEnd/js/jquery.uploadify.js" type="text/javascript"></script>

<script>
    // Default param for this control
    var boxtype;
    // 0 la box san pham, 1 la box tin tuc
    boxtype = 0;
    var boxcat, boxname;
    boxcat = <%=boxCategory %>;
    boxname = '<%=boxName %>';
</script>

<style>
    .uploadify{position: relative;}
    .swfupload{left:0px;top:0px;}
    .uploadify-queue-item, .uploadify-queue {width: 100%;margin: 0px;}
    .uploadify-queue-item span.fileName, .uploadify-queue-item span.data{display: none;}
</style>

<div id="page-content" class="block">
    <div class="block-header">
        <a href="javascript:void(0)" class="header-title-link">
            <h1>Quản lý box sản phẩm</h1>
        </a>
    </div>
    <div class="row gutter30">
        <div class="col-sm-12">
            <ul class="nav nav-tabs push" id="lstBtnNavigator">
                <asp:Repeater ID="rptNavigator" runat="server">
                    <ItemTemplate>
                        <li class="" id="tab_<%# Eval("ID")%>"><a href="/BackEnd/?ui=<%=panelId %>&boxcat=<%# Eval("ID")%>"><%# Eval("Name")%></a></li>        
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
    </div>
    <div class="row gutter30">
        <!-- danh sach item co trong he thong -->
        <div class="col-sm-6">
            <h4 class="sub-header">Danh sách sản phẩm</h4>
            <div class="col-sm-12" style="margin-bottom: 13px;">
                <div class="form-group">
                    <div class="col-sm-6">
                        <input type="text" id="txtProName" class="form-control" value="" placeholder="Nhập tên sản phẩm bạn muốn tìm">
                        <div class="help-block"></div>
                    </div>
                    <div class="col-sm-3">
                        <asp:DropDownList ID="ddlCate" runat="server" CssClass="form-control" size="1"></asp:DropDownList>
                    </div>
                    <div class="col-sm-3">
                        <button type="button" id="btnSearch" class="btn btn-sm btn-info"><i class="gi gi-search mr5"></i>Tìm kiếm</button>
                    </div>
                </div>
            </div>
            <div class="col-sm-12" style="margin-bottom: 20px;">
                <div class="table-responsive" id="lstCategory">
                <table id="Table1" class="table table-hover">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 60px;">ID</th>
                            <th>Tên sản phẩm</th>
                            <th class="text-center" style="width: 150px;">Thao tác</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyData"></tbody>
                </table>
                </div>
            </div>
        </div>
        <script language="javascript" type="text/javascript">
            if(boxcat>0) $('#tab_' + boxcat).addClass('active');
            
            $("#txtProName").bind("keypress", function (e) {
                if (e.keyCode == 13) SearchItem();
            });

            $("#btnSearch").bind("click", function () {
                SearchItem();
            });

            $("#btnPublish").bind("click", function () {
                PublishItem();
            });
            

            function SearchItem(){
                var cate, isparent;
                isparent = 0;
                cate = $('#<%=ddlCate.ClientID %>').val();
                var arCate = cate.split("|");
                if(arCate.length>1){// Neu mang co 2 phan tu tuc la cate cha
                    isparent = 1;
                    cate = arCate[0];
                }
                /*console.log('cate = ' + cate);
                console.log('arCate = ' + arCate);
                console.log('isparent = ' + isparent);
                console.log('cate SEND = ' + cate);*/
                //if (!chkTextBox('txtProName', 'Bạn phải nhập tên sản phẩm...')) return false;
                // call ajax
                var param;
                param = {
                    m: "getlistforbox",
                    ui : <%=panelId %>,
                    proname: $('#txtProName').val(),
                    procate: cate,
                    isparent: isparent
                };
                //console.log(param);
                $.ajax({
                    url: "/BackEnd/Handler/Product.ashx",
                    data: param,
                    type: "POST",
                    dataType: "json",
                    beforeSend: function () {
                        jWaiting.callWaiting();
                    },
                    success: function (data) {
                        jWaiting.clearWaiting();
                        console.log(data);
                        if (data.Success) {
                            // show data
                            var html;
                            html = '';
                            $.each(data.Data, function(key, value) {
                                //console.log(value);
                                html += '<tr id="tr' + value.ProId + '">';
                                html += '    <td class="text-center">' + value.ProId + '</td>';
                                html += '    <td>' + value.ProName + '</td>';
                                html += '    <td class="text-center">';
                                html += '        <button type="button" class="btn btn-sm btn-success" onclick="AddToBox(' + value.ProId + ', \'' + formatTextJs(value.ProName) + '\', \'' + value.ProImage1 + '\')"><i class="hi hi-log_in mr5"></i>Chọn</button>';
                                html += '    </td>';
                                html += '</tr>';
                            });
                            $('#tbodyData').html(html);
                            $("#lstCategory").slimScroll({
                                height: 600,
                                color: "#000000",
                                size: "3px",
                                color: "#000000",
                                touchScrollStep: 0
                            });
                        }
                        else {
                            jWaiting.callWaitingMessError(data.Message);
                        }
                    }
                });
            }

            function PublishItem(){
                var param;
                param = {
                    m: "publish",
                    ui : <%=panelId %>,
                    boxtype: boxtype,
                    boxcate: boxcat,
                    boximgW : <%=boxImgWidth %>,
                    boximgH : <%=boxImgHeight %>,
                    boxname: boxname
                };
                //console.log(param);
                $.ajax({
                    url: "/BackEnd/Handler/Box.ashx",
                    data: param,
                    type: "POST",
                    dataType: "json",
                    beforeSend: function () {
                        jWaiting.callWaiting();
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.Success) {
                            jWaiting.callWaitingMessSuccess('Xuất bản box <b>['+boxname+']</b> thành công', '', true);
                        }
                        else {
                            jWaiting.callWaitingMessError(data.Message);
                        }
                    }
                });
            }
            
            function AddToBox(id, name, img){
                //console.log(id);
                // call ajax
                var param;
                param = {
                    m: "addtobox",
                    ui : <%=panelId %>,
                    itemid: id,
                    boxcate: boxcat,
                    boximg: img,
                    boximgW : <%=boxImgWidth %>,
                    boximgH : <%=boxImgHeight %>,
                    boxtype: boxtype,
                    itemname: name,
                    boxname: boxname
                };
                //console.log(param);
                $.ajax({
                    url: "/BackEnd/Handler/Box.ashx",
                    data: param,
                    type: "POST",
                    dataType: "json",
                    beforeSend: function () {
                        jWaiting.callWaiting();
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.Success) {
                            //jWaiting.callWaitingMessSuccess('Sản phầm đã được thêm thành công', '', true);
                            jWaiting.clearWaiting();
                            // code client load lại list sản phẩm bên phải
                            BindDataRigh(data.ExtData);
                        }
                        else {
                            jWaiting.callWaitingMessError(data.Message);
                        }
                    }
                });
            }

            function BindDataRigh(ar){
                // show data
                var html;
                html = '';
                $.each(ar, function(key, value) {
                    //console.log(value);
                    html += '<tr id="trMain_' + value.ProId + '">';
                    html += '    <td class="text-center">' + value.ProId + '</td>';
                    html += '    <td class="text-center">';
                    html += '        <div class="btn-group dropup text-left">';
                    html += '            <a href="javascript:void(0)" data-toggle="dropdown" class="btn btn-xs btn-default btn-danger dropdown-toggle"><i class="gi gi-bin"></i> </a>';
                    html += '            <ul class="dropdown-menu dropdown-menu-delete dropright">';
                    html += '                <li><a href="javascript:void(0)" onclick="DeleteData(' + value.BoxId + ', \'' +  formatTextJs(value.ProName) + '\')">Xóa khỏi Box</a></li>';
                    html += '                <li><a href="javascript:void(0)">Hủy</a></li>';
                    html += '            </ul>';
                    html += '        </div>';
                    html += '    </td>';
                    html += '    <td class="text-center">';
                    html += '        <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-default btn-info" data-original-title="Đưa lên trên" onclick="OrderBox(' + value.BoxId + ',\'' + formatTextJs(value.ProName) + '\', 1)"><i class="gi gi-up_arrow"></i></a>';
                    html += '        <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-default btn-info" data-original-title="Chuyển xuống dưới" onclick="OrderBox(' + value.BoxId + ',\'' + formatTextJs(value.ProName) + '\', 0)"><i class="gi gi-down_arrow"></i></a>';
                    html += '    </td>';
                    html += '    <td>' + value.ProName + '</td>';
                    html += '    <td class="text-center"><img id="avatar_' + value.BoxId + '" src="' + value.ThumbBoxImage + '" style="max-width: 100px; max-height:50px"></td>';
                    html += '    <td class="text-center"><input id="file_upload_' + value.BoxId + '" name="file_upload" type="file" multiple="true" rel="uploadboximg" BoxId="' + value.BoxId + '"></td>';
                    html += '</tr>';
                });
                $('#tbodyDataRigh').html(html);
                $("#lstCategory1").slimScroll({
                    height: 600,
                    color: "#000000",
                    size: "3px",
                    color: "#000000",
                    touchScrollStep: 0
                });
                BindUploadify();
            }

            function DeleteData(id, name){
                var param;
                param = {
                    m: "delete",
                    ui : <%=panelId %>,
                    boxid: id,
                    boxcate: boxcat,
                    boxtype: boxtype,
                    itemname: name,
                    boximgW : <%=boxImgWidth %>,
                    boximgH : <%=boxImgHeight %>,
                    boxname: boxname
                };
                //console.log(param);
                $.ajax({
                    url: "/BackEnd/Handler/Box.ashx",
                    data: param,
                    type: "POST",
                    dataType: "json",
                    beforeSend: function () {
                        jWaiting.callWaiting();
                    },
                    success: function (data) {
                        if (data.Success) {
                            //jWaiting.callWaitingMessSuccess('Sản phầm đã xóa thành công', '', true);
                            jWaiting.clearWaiting();
                            // code client load lại list sản phẩm bên phải
                            BindDataRigh(data.ExtData);
                        }
                        else {
                            jWaiting.callWaitingMessError(data.Message);
                        }
                    }
                });
            }

            function OrderBox(boxid, namePro, action){
                // call ajax
                var param;
                param = {
                    m: "order",
                    ui : <%=panelId %>,
                    boxid: boxid,
                    boxtype: boxtype,
                    action: action,
                    boxcate: boxcat,
                    boximgW : <%=boxImgWidth %>,
                    boximgH : <%=boxImgHeight %>,
                    itemname: namePro,
                    boxname: boxname
                };
                //console.log(param);
                $.ajax({
                    url: "/BackEnd/Handler/Box.ashx",
                    data: param,
                    type: "POST",
                    dataType: "json",
                    beforeSend: function () {
                        jWaiting.callWaiting();
                    },
                    success: function (data) {
                        if (data.Success) {
                            //jWaiting.callWaitingMessSuccess('Thay đổi vị trí sản phẩm thành công', '', true);
                            jWaiting.clearWaiting();
                            // code client load lại list sản phẩm bên phải
                            BindDataRigh(data.ExtData);
                        }
                        else {
                            jWaiting.callWaitingMessError(data.Message);
                        }
                    }
                });
            }

            
        </script>

        <!-- danh sach item co trong Box -->
        <div class="col-sm-6">
            <h4 class="sub-header">Danh sách sản phẩm trong Box</h4>
            <div class="col-sm-12" style="">
                <div class="form-group text-center" style="margin-bottom: 20px;">
                    <button type="button" id="btnPublish" class="btn btn-sm btn-info" onclick="PublishItem()"><i class="gi gi-file_export mr5"></i>Xuất bản</button>
                </div>
                
            </div>
            <div class="col-sm-12" style="margin-bottom: 20px;">
                <div class="table-responsive slimBorder" id="lstCategory1">
                    <table id="tblParent" class="table table-hover">
                        <thead>
                            <tr>
                                <th class="text-center" style="width: 60px;">#</th>
                                <th class="text-center" style="width: 60px;">Xóa</th>
                                <th class="text-center" style="width: 60px;"></th>
                                <th>Tên sản phẩm</th>
                                <th class="text-center" style="width: 120px;">Ảnh đại diện</th>
                                <th class="text-center" style="width: 100px;">Thao tác</th>
                            </tr>
                        </thead>
                        <tbody id="tbodyDataRigh">
                            <asp:Repeater ID="rptListItemInBox" runat="server">
                                <ItemTemplate>
                                    <tr id="trMain_<%# Eval("ProId") %>">
                                        <td class="text-center"><%# Eval("ProId") %></td>
                                        <td class="text-center">
                                            <div class="btn-group dropup text-left">
                                                <a href="javascript:void(0)" data-toggle="dropdown" class="btn btn-xs btn-default btn-danger dropdown-toggle"><i class="gi gi-bin"></i> </a>
                                                <ul class="dropdown-menu dropdown-menu-delete dropright">
                                                    <li><a href="javascript:void(0)" onclick="DeleteData(<%# Eval("BoxId") %>, '<%# Eval("ProNameForJs") %>')" >Xóa khỏi Box</a></li>
                                                    <li><a href="javascript:void(0)">Hủy</a></li>
                                                </ul>
                                            </div>
                                        </td>
                                        <td class="text-center">
                                            <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-default btn-info"
                                                data-original-title="Đưa lên trên" onclick="OrderBox(<%# Eval("BoxId") %>, '<%# Eval("ProNameForJs") %>', 1)"><i class="gi gi-up_arrow"></i></a>
                                            <a href="javascript:void(0)" data-toggle="tooltip" title="" class="btn btn-xs btn-default btn-info"
                                                data-original-title="Chuyển xuống dưới" onclick="OrderBox(<%# Eval("BoxId") %>, '<%# Eval("ProNameForJs") %>', 0)"><i class="gi gi-down_arrow"></i></a>
                                        </td>
                                        <td><%# Eval("ProName")%></td>
                                        <td class="text-center">
                                            <img id="avatar_<%# Eval("BoxId") %>" src="<%# Eval("ThumbBoxImage")%>" style="max-width: 100px; max-height:50px">
                                        </td>
                                        <td class="text-center">
                                            <%--
                                                sid = 1 là sang control upload ảnh khác nhưng vẫn có control cha để check phân quyền là từ control này
                                                typebox: 0 là sản phẩm, 1 là dành cho tin tức
                                                boxcate: ID của cả box chứ k phải từng thành phần của box
                                                boxid: ID của sản phẩm/tin trong box
                                                w: chiều rộng của ảnh đại diện của sản phẩm/tin trong box
                                                h: chiều cao của ảnh đại diện của sản phẩm/tin trong box
                                            --%>
                                            <%--<a href="/BackEnd/?ui=<%=panelId %>&sui=1&typebox=0&boxcate=<%=boxCategory %>&boxid=<%# Eval("BoxId") %>&w=<%=boxImgWidth %>&h=<%=boxImgHeight %>" class="btn btn-sm btn-primary"><i class="gi gi-picture mr5"></i>Đổi ảnh</a>--%>
                                            <input id="file_upload_<%# Eval("BoxId") %>" name="file_upload" type="file" multiple="true" rel="uploadboximg" BoxId="<%# Eval("BoxId") %>">
                                        </td>
                                    </tr>
                                </ItemTemplate>
                            </asp:Repeater>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

<script>

    function BindUploadify(){
        var arLstBtnUpload = $("input[rel*='uploadboximg']");
        var boxid;
        boxid = 0;
        $.each(arLstBtnUpload, function (index, value) {
            //console.log($(value).attr('id'));
            boxid = $(value).attr('BoxId');
            $(value).uploadify({
                'formData': {
                    'timestamp': '',
                    'token': ''
                },
                'fileTypeDesc': 'Image Files',
                'fileTypeExts': '*.gif; *.jpg; *.png',
                'multi': false,
                'buttonImage': '/BackEnd/img/browse-btn.png',
                'successTimeout': 300,
                'swf': '/BackEnd/js/uploadify.swf',
                'removeTimeout': 0,
                <%--
                    sid = 1 là sang control upload ảnh khác nhưng vẫn có control cha để check phân quyền là từ control này
                    typebox: 0 là sản phẩm, 1 là dành cho tin tức
                    boxcate: ID của cả box chứ k phải từng thành phần của box
                    boxid: ID của sản phẩm/tin trong box
                    w: chiều rộng của ảnh đại diện của sản phẩm/tin trong box
                    h: chiều cao của ảnh đại diện của sản phẩm/tin trong box
                --%>
                'uploader': "/BackEnd/Handler/UploadImage.ashx?m=uploadavatarbox&typebox="+boxtype+"&boxcate=<%=boxCategory %>&boxid="+boxid+"&w=<%=boxImgWidth %>&h=<%=boxImgHeight %>",
                'onUploadStart': function (file, data, response) {
                    
                },
                'onUploadSuccess': function (file, data, response) {
                    console.log(data);
                    var obj = JSON.parse(data);
                    if (obj.Success == true) {
                                //$('#hdAvatar_'+boxid).val(obj.Data);
                                $('#avatar_'+obj.Data).attr('src', obj.ExtData);
                    } else {
                        jWaiting.callWaitingMessError(obj.Message, '');
                    }
                }
            });

        });
                
    }

    $(function () {
        $("#lstCategory").slimScroll({
            height: 600,
            color: "#000000",
            size: "3px",
            color: "#000000",
            touchScrollStep: 0
        });

        $("#lstCategory1").slimScroll({
            height: 600,
            color: "#000000",
            size: "3px",
            color: "#000000",
            touchScrollStep: 0
        });

        BindUploadify();

        // chan submit form khi enter trong textbox
        $("form").submit(function (e) {
            event.preventDefault();
            return false;
        });



    });

</script>